<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="qv.css">
</head>
<body style="background: transparent">
<div class="d-flex flex-row" style="height: 100vh">
    <div class="left-plan d-flex flex-column p-1 pb-0">
        <div class="ncard m-1">
            <div>接收站选择</div>
            <select id="src"
                    style="width: 240px;text-align: left;font-weight: bold;"
                    class="p-1">
                <option value="GRAS3">GRAS3</option>
                <option value="GRAS4">GRAS4</option>
                <option value="GRAS5">GRAS5</option>
                <option value="DASSyn">DASSyn</option>
                <optgroup label="测控站">
                    <option value="BACC_JM">佳木斯深空站</option>
                    <option value="BACC_KS">喀什深空站</option>
                    <option value="BACC_NM">阿根廷深空站</option>
                    <option value="BACC_QD18">青岛18米天线</option>
                    <option value="BACC_KS18">喀什18米天线</option>
                    <option value="BACC_NMBY">纳米比亚18米天线</option>
                    <option value="BACC_KSSYN">喀什合成站</option>
                    <option value="BACC_KS35">喀什35米天线</option>
                </optgroup>
            </select>
        </div>
        <div class="ncard m-1">
            <div>工参遥测</div>
            <select size="4" class="x-sel" id="type-menu" style="height: 80px;">
                <option value="gunc/rt">工程参数</option>
                <option value="yaoc/rt">工程遥测</option>
            </select>
        </div>
        <div class="ncard m-1 flex-grow-1 d-flex flex-column mb-0">
            <div>科学数据</div>
            <select id="type-menu-sub" class="x-sel flex-grow-1" size="2">
                <!--                <option value="AMAC">中视场彩色相机</option>-->
                <!--                <option value="AWACA">宽视场导航敏感器A</option>-->
                <!--                <option value="AWACB">宽视场导航敏感器B</option>-->
                <!--                <option value="ANAC">窄视场导航敏感器</option>-->
                <!--                <option value="AMSC">多光谱相机</option>-->
                <!--                <option value="ARDIS">旋转衍射高光谱相机</option>-->
                <!--                <option value="ATES">热辐射光谱仪</option>-->
                <!--                <option value="AVIRIS">可见红外成像光谱仪</option>-->
                <!--                <option value="DMA">喷发物分析仪-尘埃分析仪</option>-->
                <!--                <option value="VITA">喷发物分析仪-挥发分分析仪</option>-->
                <!--                <option value="CANPA">带电粒子与中性粒子分析仪</option>-->
                <!--                <option value="ALADAR">激光一体化导航敏感器</option>-->
                <!--                <option value="ACSR">探测雷达</option>-->
                <!--                <option value="AMAG">磁强计</option>-->
            </select>
        </div>
    </div>
    <div class="d-flex flex-column flex-grow-1">
        <iframe name="viewer" class="d-block flex-grow-1 me-2 mt-2 bg-light"></iframe>
    </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        get_user()
    });

    async function get_user() {
        let u = await fetch('/-/auth.userinfo').then(v => v.json());
        console.log('加载role', u.role);
        const $select = $('#type-menu-sub');
        if (u.role === 'adm_omsp' || u.role === 'adm') {
            $select.append($('<option>', {value: 'AMAC', text: '中视场彩色相机'}));
            $select.append($('<option>', {value: 'AWACA', text: '宽视场导航敏感器A'}));
            $select.append($('<option>', {value: 'AWACB', text: '宽视场导航敏感器B'}));
            $select.append($('<option>', {value: 'ANAC', text: '窄视场导航敏感器'}));
            $select.append($('<option>', {value: 'AMSC', text: '多光谱相机'}));
            $select.append($('<option>', {value: 'ARDIS', text: '旋转衍射高光谱相机'}));
            $select.append($('<option>', {value: 'ATES', text: '热辐射光谱仪'}));
            $select.append($('<option>', {value: 'AVIRIS', text: '可见红外成像光谱仪'}));
            $select.append($('<option>', {value: 'DMA', text: '喷发物分析仪-尘埃分析仪'}));
            $select.append($('<option>', {value: 'VITA', text: '喷发物分析仪-挥发分分析仪'}));
            $select.append($('<option>', {value: 'CANPA', text: '带电粒子与中性粒子分析仪'}));
            $select.append($('<option>', {value: 'ALADAR', text: '激光一体化导航敏感器'}));
            $select.append($('<option>', {value: 'ACSR', text: '探测雷达'}));
            $select.append($('<option>', {value: 'AMAG', text: '磁强计'}))
        } else if (u.role === 'AWACA/B') {
            $select.append($('<option>', {value: 'AWACA', text: '宽视场导航敏感器A'}));
            $select.append($('<option>', {value: 'AWACB', text: '宽视场导航敏感器B'}));
        } else {
            $select.append($('<option>', {
                value: u.role,
                text: u.name,
            }))
        }

    }

    let $INS = $('#type-menu-sub').click(to_ins);
    let $TELE = $('#type-menu').click(to_tele);
    let current = '';
    let $SRC = $('#src');

    function to_tele(ev) {
        current = $TELE.val();
        $INS.val('-');
        document.querySelector('iframe').src = `${current}.html`;
        window.parent.location.hash = `TELE/${current}`;
        window.parent.document.title = `OMSP - 数据快视 / ${current}`
    }

    function to_ins(ev) {
        current = $INS.val();
        src = $SRC.val();
        $TELE.val('-');
        document.querySelector('iframe').src = `${current}.html#${src}`;
        window.parent.location.hash = `QV/${current}`;
        window.parent.document.title = `OMSP - 数据快视 / ${current}`
    }

    function realtime() {
        document.querySelector('iframe').contentWindow.main.realtime()
    }

    function history() {
        document.querySelector('iframe').contentWindow.main.history()

    }

    function change_stat(e) {
        let frame = document.querySelector('iframe').contentWindow;
        frame.postMessage($SRC.val(), '*')
    }

    $SRC.change(change_stat)

</script>
</body>
</html>